<template>
  <view class="my-inspection">
    <scroll-view class="scroll" scroll-x="true">
      <view
        :class="currentTab == index ? 'select' : ''"
        :data-current="index"
        @click="swichNav"
        v-for="(item, index) in scoll"
        :key="index"
        >{{ item.txt }}
      </view>
    </scroll-view>
    <swiper
      :current="currentTab"
      @change="bindChange"
      class="swp"
      :style="{ height: aheight ? aheight + 'px' : 'auto' }"
    >
      <swiper-item class="scroll-item">
        <div class="list">
          <view class="card-list cbox">
            <view class="card-item cbox">
              <view class="head rbox box_y_center box_space_b">
                <text class="date">送检时间：2020-11-10 07:39:18</text>
                <text class="state">待诊断</text>
              </view>
              <view class="info rbox">
                <view class="img-wrap"></view>
                <view class="info-wrap cbox boxf_1">
                  <text class="tit">微生物菌落分析</text>
                  <text class="sub">第三庄农庄</text>
                </view>
                <view class="btn rbox box_self_center">点击邮寄</view>
              </view>
            </view>
          </view>
        </div>
      </swiper-item>
      <swiper-item class="scroll-item">222</swiper-item>
      <swiper-item class="scroll-item">333</swiper-item>
      <swiper-item class="scroll-item">444</swiper-item>
      <swiper-item class="scroll-item">555</swiper-item>
      <swiper-item class="scroll-item">666</swiper-item>
    </swiper>
  </view>
</template>


<script>
export default {
  data() {
    return {
      currentTab: 0,
      aheight: '',
      scoll: [
        {
          txt: '全部'
        }, {
          txt: '待邮寄'
        }, {
          txt: '邮寄中'
        }, {
          txt: '检测中'
        }, {
          txt: '已完成'
        }, {
          txt: '已评价'
        }],
    }
  },
  onShow() {
    // 动态获取滑动页面高度
    const query = uni.createSelectorQuery().in(this);
    query.select('.list').boundingClientRect(data => {
      this.aheight = data.height
    }).exec();
  },
  methods: {
    // 滑动页面同步tab栏
    bindChange: function (e) {
      this.currentTab = e.detail.current
    },
    //点击tab切换
    swichNav: function (e) {
      var that = this;
      if (this.currentTab === e.target.dataset.current) {
        return false;
      } else {
        this.currentTab = e.target.dataset.current
      }
    }
  }
}
</script >

<style scoped lang="scss">
.my-inspection {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.scroll {
  margin-bottom: 20rpx;
  padding: 30rpx 42rpx;
  width: 100%;
  white-space: nowrap;
  background-color: #fff;
  view {
    padding: 12rpx 46rpx;
    display: inline-block;
    font-size: 26rpx;
    line-height: 1;
    color: #878787;
    background-color: #f7f7f7;
    border-radius: 26rpx;
    &:not(:first-child) {
      margin-left: 20rpx;
    }
    &.select {
      color: #fff;
      background-color: #1de1c3;
    }
  }
}
.scroll-item {
  padding: 0 42rpx;
  box-sizing: border-box;
}

.card-list {
  .card-item {
    .head {
      padding: 16rpx 30rpx;
      background-color: #fff;
      border-radius: 16rpx 16rpx 0px 0px;
      .date {
        font-size: 24rpx;
        line-height: 1;
        color: #b5b5b5;
      }
      .state {
        font-size: 24rpx;
        line-height: 1;
        color: #1de1c3;
      }
    }
    .info {
      margin-top: 4rpx;
      padding: 34rpx 30rpx 42rpx;
      background-color: #fff;
      border-radius: 0px 0px 20rpx 20rpx;
      .btn {
        padding: 10rpx 24rpx;
        font-size: 24rpx;
        height: 48rpx;
        border-radius: 48rpx;
        line-height: 1;
        color: #fff;
        background-color: #1de1c3;
      }
      .img-wrap {
        width: 122rpx;
        height: 72rpx;
        background-color: #e9c2c2;
      }
      .info-wrap {
        margin-left: 16rpx;
        .tit {
          font-size: 26rpx;
          line-height: 1;
          color: #878787;
        }
        .sub {
          margin-top: auto;
          font-size: 26rpx;
          line-height: 1;
          color: #b9b9b9;
        }
      }
    }
  }
}
</style>
